<template>
  <div class="content">
    <div class="c_title">VUE3-DEMO</div>
    <a-button type="primary" @click="gojump('/demo')">Demo案例</a-button>
    <a-button
      type="primary"
      @click="gojump('/request')"
      style="margin-left: 10px"
      >axios网络请求</a-button
    >
    <a-button type="primary" @click="gojump('/pinia')" style="margin-left: 10px"
      >pinia状态管理</a-button
    >
    <a-button
      type="primary"
      @click="gojump('/moment')"
      style="margin-left: 10px"
      >Moment时间插件</a-button
    >
    <a-button
      type="primary"
      @click="gojump('/animate')"
      style="margin-left: 10px"
      >Animate动画插件</a-button
    >
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import { ref, reactive } from "vue";

const gojump = (url: string): void => {
  if (url != "") {
    router.push({
      path: url,
    });
  }
};
</script>

<style scoped lang="scss">
.content {
  padding: 20px;
  width: 100%;
  height: 100vh;
  background: url("@/assets/img/back.jpg");
  background-size: cover;
  .c_title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
  }
}
</style>
